<template>
	<el-row type="flex" :align="align" class="title-module" :class="{ border }">
		<div v-if="title || subTitle">
			<span class="title-module__title">{{ title }}</span>
			<span class="title-module__sub" v-if="subTitle">{{ subTitle }}</span>
		</div>
		<cl-flex1 class="mr-1">
			<slot />
		</cl-flex1>
		<cl-table-handle
			v-if="!hideHandle"
			:columns="columns"
			v-model="columnsVal"
			@confirm="filterConfirm"
			@export-file="exportFile"
		/>
	</el-row>
</template>

<script>
export default {
	name: "cl-title-module",
	props: {
		align: {
			type: String,
			default: "middle"
		},
		border: {
			type: Boolean,
			default: true
		},
		title: {
			type: String,
			default: ""
		},
		subTitle: {
			type: String,
			default: ""
		},
		print: {
			type: Object,
			default: () => ({})
		},
		columns: {
			type: Array,
			default: () => []
		},
		value: {
			type: Array,
			default: () => []
		},
		// 匹配的键值
		filterKey: {
			type: String,
			default: "label"
		},
		hideHandle: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			columnsVal: this.value
		};
	},
	watch: {
		value: {
			immediate: true,
			handler(v) {
				this.columnsVal = v;
			}
		}
	},
	methods: {
		//表头筛选
		filterConfirm(v) {
			this.columnsVal = v;
			this.$emit("input", v);
			this.$emit("filter-confirm", v);
		},
		// 导出
		exportFile() {
			this.$emit("export-file");
		}
	}
};
</script>

<style lang="scss" scoped>
.title-module {
	box-sizing: border-box;
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 5px;
	margin-bottom: 10px;
	min-height: 33px;
	&.border {
		border-bottom: 0.5px solid $border-main;
	}
	&__title {
		font-size: 18px;
	}
	&__sub {
		color: $color-sub-text;
		font-size: 12px;
		margin-left: 10px;
	}
}
</style>
